<template>
    <div>
        <van-nav-bar
                title="购物车"
                left-text=""
                :right-text="rightText"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />

        <van-cell v-for="(spu,index) in shopCarList">
            <van-checkbox v-model="spuList[index].checked"
                          style="display: block;float: left;position: relative;top: 50px;" @change="checkboxChange">

            </van-checkbox>
            <van-card
                    style="position: relative;left: 20px;width: 95%"
            >
                <template #thumb>
                    <van-image :src="spu.sku.skuImg"></van-image>
                </template>
                <template #title>
                    {{spu.spu.spuName}}
                </template>
                <template #price>
                    <span style="font-weight: bold;color: #f2270c;font-size: 16px"> ￥{{spu.sku.price*spu.sku.sum}}</span>
                </template>
                <template #tags>
                    <van-tag plain type="danger">{{spu.sku.skuName}}</van-tag>
                </template>
                <template #footer>
                    <van-stepper @change="stepper" v-model="spuList[index].sum" theme="round" button-size="22" disable-input/>
                </template>
            </van-card>
        </van-cell>

        <van-divider/>

        <van-submit-bar :price="sumMoney*100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script>
    import {Toast} from 'vant';
    import {Card} from 'vant';

    export default {
        name: "MyShopCar",
        data() {
            return {
                value: 1,
                shopCarList: [],
                spuList: [],
                editStatus: false,
                rightText: "编辑",
                sumMoney: 0,
                checked: true
            }
        },
        created() {
            this.getShopCarList();
        },
        methods: {
            getShopCarList() {
                this.$axios({
                    method: "get",
                    url: "http://localhost:8101/shopCar/findMyShoppingCar/" + 1
                }).then(result => {
                    console.log(result.data);
                    this.shopCarList = result.data;
                    for (let i = 0; i < this.shopCarList.length; i++) {
                        let obj = new Object();
                        obj.spuId = this.shopCarList[i].spu.spuId
                        obj.skuId = this.shopCarList[i].sku.skuId
                        obj.sum = this.shopCarList[i].sku.sum
                        obj.price = this.shopCarList[i].sku.price
                        obj.checked = true;
                        this.spuList.push(obj)
                    }
                    console.log(this.spuList)

                    this.checkboxChange();
                })
            },
            onClickLeft() {//返回按钮
                this.$router.replace({path: "/"})
            },
            onClickRight() {//编辑按钮
                if (this.editStatus == true) {
                    console.log(1)
                    this.editStatus = false;
                    this.rightText = "编辑"
                } else {
                    console.log(2)
                    this.editStatus = true;
                    this.rightText = "完成"
                }
            }, goToGoods() {
                this.$router.push({path: '/goods'});
            }, onSubmit() {

            }, onClickEditAddress() {

            }, checkboxChange() {
                this.sumMoney = 0;
                for (let i = 0; i < this.spuList.length; i++) {
                    if (this.spuList[i].checked == true) {
                        this.sumMoney += this.spuList[i].sum * this.spuList[i].price
                    }
                }
            }, stepper() {
                this.checkboxChange();
            }
        },
    }
</script>

<style scoped>
    .van-card {
        background-color: #0000;
    }

    .van-card__content {
        position: relative;
        bottom: 7px;
    }
</style>
